<template>
    <el-dialog
        title="添加楼栋"
        :visible.sync="dialogVisible"
        width="30%"
        :close-on-click-modal="false"
    >
        <el-form ref="editform" :model="newBuilding" :rules="rules" label-width="80px">
            <el-form-item label="楼栋编号" prop="buildingId">
                <el-input v-model="newBuilding.buildingId" placeholder="请输入楼栋编号"></el-input>
            </el-form-item>
            <el-form-item label="楼层" prop="totalFloor">
                <el-input v-model="newBuilding.totalFloor" placeholder="请输入楼层"></el-input>
            </el-form-item>
            <el-form-item label="面向对象" prop="type">
                <el-select v-model="newBuilding.type" style="width: 100%" placeholder="请选择">
                    <el-option
                        v-for="item in buildingRoles"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="面向性别" prop="sex">
                <el-select v-model="newBuilding.sex" style="width: 100%" placeholder="请选择">
                    <el-option
                        v-for="item in buildingGender"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="联系方式" prop="contactWay">
                <el-input v-model="newBuilding.contactWay" placeholder="请输入联系方式"></el-input>
            </el-form-item>
            <el-form-item label="物业单位信息" prop="propertyUnit">
                <el-input v-model="newBuilding.propertyUnit" placeholder="请输入物业单位相关信息"></el-input>
            </el-form-item>
            <el-form-item label="楼管姓名" prop="residentialManager">
                <el-input v-model="newBuilding.residentialManager" placeholder="请输入楼管姓名"></el-input>
            </el-form-item>
            <el-form-item label="住楼辅导员信息" prop="teacherName">
                <el-input v-model="newBuilding.teacherName" placeholder="请输入姓名"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </span>
    </el-dialog>
</template>
<script>
import { addBuilding } from '../../../../api/third'

export default {
  name: 'UserAddDialog',
  data () {
    return {
      dialogVisible: false,
      roles: [],
      newBuilding: {
        buildingId: '',
        totalFloor: '',
        type: '', // 初始化为空字符串
        sex: '', // 初始化为空字符串
        contactWay: '',
        propertyUnit: '',
        residentialManager: '',
        teacherName: ''
      },
      buildingRoles: [
        { value: '本科生', label: '本科生' },
        { value: '研究生', label: '研究生' },
        { value: '博士生', label: '博士生' },
        { value: '其他', label: '其他' }
      ],
      buildingGender: [
        { value: '男', label: '男' },
        { value: '女', label: '女' },
        { value: '不限', label: '不限' }
      ],
      rules: {
        buildingId: [{ required: true, message: '请输入楼栋编号', trigger: 'blur' }],
        totalFloor: [{ required: true, message: '请输入楼层', trigger: 'blur' }],
        type: [{ required: true, message: '请选择面向对象', trigger: 'change' }],
        sex: [{ required: true, message: '请选择面向性别', trigger: 'change' }]
      }
    }
  },
  methods: {
    show (user, roles) {
      this.dialogVisible = true
      this.newBuilding = JSON.parse(JSON.stringify(user))
      this.roles = roles
    },
    handleSubmit () {
      console.log('确认按钮点击事件触发了')
      this.$refs.editform.validate(valid => {
        if (valid) {
          console.log('表单验证通过，提交数据：', this.newBuilding)
          addBuilding(this.newBuilding).then(res => {
            console.log('添加楼栋请求成功：', res)
            if (res.data === true) {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.dialogVisible = false // 关闭对话框
              this.$emit('ok') // 向父组件发送消息
              console.info(res)
            }
          }).catch(error => {
            console.error('添加楼栋请求失败：', error)
            this.$message.error('添加楼栋失败：' + error.message)
          })
        } else {
          // 如果表单验证不通过，可以给出提示信息
          this.$message.error('请填写正确的表单信息')
        }
      })
    }
  }
}
</script>

<style scoped>
/* 样式可以根据需要自行定义 */
</style>
